<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/layui/css/layui.css">
        <style type="text/css">
      		.container{

            @if($type)

            width: 420px;
      			height: 385px;
		 		 min-height: 320px;  
		 		 max-height: 500px;  

            @else

            width: 420px;
      			height: 275px;
		 		 min-height: 275px;  
		 		 max-height: 320px;  
            
            @endif

      			/* width: 420px;
      			height: 320px;
		 		 min-height: 320px;  
		 		 max-height: 320px;   */
		 		 position: absolute;   
		 		 top: 0;  
		 		 left: 0;  
		 		 bottom: 0;  
		 		 right: 0;  
		 		 margin: auto;  
		 		 padding: 20px;  
		 		 z-index: 130;  
		 		 border-radius: 8px;  
		 		 background-color: #fff;  
		 		 box-shadow: 0 3px 18px rgba(100, 0, 0, .5); 
		 		 font-size: 16px;
      		}
      		.close{
      			background-color: white;
      			border: none;
      			font-size: 18px;
      			margin-left: 410px;
      			margin-top: -10px;
      		}
 
        	.layui-input{
        		border-radius: 5px;
        		width: 300px;
        		height: 40px;
        		font-size: 15px;
        	}
        	.layui-form-item{
        		margin-left: -20px;
        	}
			#logoid{ 
				margin-top: -16px;
		 		 padding-left:150px; 
		 		 padding-bottom: 15px;
			}
			.layui-btn{
				margin-left: -50px;
				border-radius: 5px;
        		width: 350px;
        		height: 40px;
        		font-size: 15px;
			}
			.verity{
				width: 120px;
			}
			.font-set{
				font-size: 13px;
				text-decoration: none; 
				margin-left: 325px;
			}
			a:hover{
			 text-decoration: underline; 
			}
 
        </style>
    </head>
    <body>
    	<form class="layui-form" action="" method="post">
    		<div class="container">
    			<button class="close" title="关闭">X</button>
    			<div class="layui-form-mid layui-word-aux">
@if($type)
            <h2 style="margin-left: 175px; margin-bottom: 15px;">registered</h2>
@else
    				<!-- <img id="logoid" src="/images/login.png" height="35">   -->
            <h2 style="margin-left: 175px; margin-bottom: 15px;">login</h2>
@endif
    			</div>
        @if($type)
        <div class="layui-form-item">
			    <label class="layui-form-label">email</label>
			    <div class="layui-input-block">
			      <input type="text" name="email" required  lay-verify="required" placeholder="please input your email" autocomplete="off" class="layui-input">
			    </div>
			  </div>
        @endif

        @csrf

			  <div class="layui-form-item">
			    <label class="layui-form-label">username</label>
			    <div class="layui-input-block">
			      <input type="text" name="username" required  lay-verify="required" placeholder="please enter user name" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">password</label>
			    <div class="layui-input-inline">
			      <input type="password" name="password" required lay-verify="required" placeholder="Please enter the password" autocomplete="off" class="layui-input">
			    </div>
			    <!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
			  </div>
        @if($type)
        <div class="layui-form-item">
			    <label class="layui-form-label">confirm password</label>
			    <div class="layui-input-inline">
			      <input type="password" name="ConfirmPassword" required lay-verify="required" placeholder="Please enter the password" autocomplete="off" class="layui-input">
			    </div>
			    <!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
			  </div>
        @endif

			   <!-- <div class="layui-form-item">
			    <label class="layui-form-label">验证码</label>
			    <div class="layui-input-inline">
			      <input type="text" name="verify" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input verity">
			    </div>
			    <div class="layui-form-mid layui-word-aux">辅助文字</div>
			  </div> -->
        
<!-- 			  <div class="layui-form-item">
				    <label class="layui-form-label">记住密码</label>
				    <div class="layui-input-block">
				      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
				    </div>
			  </div> -->
 
			   <!-- <a href="" class="font-set">忘记密码?</a>   -->
         @if($type)
         <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button class="layui-btn" lay-submit lay-filter="formDemo">registered</button>	     
			    </div>
			  </div>
         <a href="/login_view" class="font-set">login&nbsp;immediately</a>
         @else
         <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button class="layui-btn" lay-submit lay-filter="formDemo">login</button>	     
			    </div>
			  </div>
         <a href="/login_view?type=registered" class="font-set">Register Now</a>
         @endif
		 <!-- <a href="/" class="font-set" style="margin-left: -410px;">Return to the home page</a> -->
			</div>
		</form>
		<script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
		<script>
			layui.use(['form', 'layedit', 'laydate'], function(){
			  var form = layui.form
			  ,layer = layui.layer
			  ,layedit = layui.layedit
			  ,laydate = layui.laydate;
			  			  
			  //监听提交
			  form.on('submit(formDemo)', function(data){
          var url = '/login';
          var url2 = '/dashboard';

          if("{{ $type }}" == 'registered'){
            url = '/registered';
            url2 = '/login_view';
          }

          $.post(url, data.field,
          function(res){
            if(res.status_code == '400'){
          layer.alert(JSON.stringify(res.data.error), {
			      title: res.message
			    })
          console.log(res);
          return false;
            }

            if(res.status_code == '200'){
          layer.alert(JSON.stringify(res.message), {
			      title: res.message
			    })  
          console.log(res);
          window.setTimeout("window.location='"+url2+"'",1000);
          return false;
            }

          });
          
			    return false;
			  });
			 
			});
			</script>
    </body>
</html>